<template>
	<view class="content">
		<view v-if="ani" class="animate__animated animate__bounce">An animated element</view>
		<button @tap="toggleAnimate">toggleAnimate</button>
		<text class="test">test</text>
		<view class="bg"></view>
		<button @tap="logout">logout</button>
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		 <mescroll-uni ref="mescrollRef" class="mescroll-zlgb" @init="mescrollInit" top="365" bottom="100" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<!-- 大海报 -->
			<image id="anchorPoint" src="http://www.mescroll.com/img/taobao/taobao3.jpg" mode="widthFix" style="width: 100%"/>
			 
			<!-- 数据列表 -->
			<ul>
				<li v-for="(item,i) in goodList" :key="i">{{item.name}}</li>
			</ul>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				goodList:[],
				upOption:{
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 搜索无数据 ~', // 提示
						btnText: '去看看'
					}
				},
				ani : false
			}
		},
		onLoad() {
			this.goodList.push({
				name:123
			})
		},
		mounted() {

		},
		onReachBottom() {
			
		},
		methods: {
			logout(){
				this.$store.commit('logout',{send:true})
			},
			addItem(){
				setTimeout(()=>{
					for(let i=0;i<10;i++){
						this.goodList.push({name:Math.random()})
					}
					this.mescroll.endSuccess(10);
				},1000)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				const {num,size} =page
				if(num == 50){
					this.mescroll.endSuccess(0);
				}else if(num == 1){
					this.goodList = []; 
					this.addItem()
				}else{
					this.addItem()
				}
			},
			toggleAnimate(){
				console.log(this.ani)
				this.ani = !this.ani
			},
		}
	}
</script>

<style scoped lang="less">

</style>
